<template>
  <div>
    <!--主体部分 -->
    <el-main>
      <!-- 航班列表 -->
      <div>
        <el-table :data="pagedList" border style="width: 100%" highlight-current-row>
          <el-table-column prop="username" label="用户名" class-name="username"></el-table-column>
          <el-table-column prop="is_admin" label="是否为管理员" class="is_admin"></el-table-column>
          <el-table-column label="操作" class="flight-option">
            <template v-slot:default="slotProps">
              <el-button @click="delete(slotProps.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-main>
    <!-- //底部分页栏 -->
    <el-footer class="footer">
      <el-pagination background layout="total,prev,pager,next" v-bind:page-count="totalPage" v-bind:total="totalusers" v-bind:page-size="pageSize"></el-pagination>
    </el-footer>
  </div>
</template>
<script >
export default {
  created() {
    this.getData()
  },
  name: "chakanyonghu",
  data() {
    return {
      rawList: [],
      currentPage: 1,
      pageSize: 6,
    };
  },
  methods: {
    getData() {
      // 查询数据
        this.$axios.get("/userdata.json")
        .then(response => (
          this.rawList = response.data.result.dayList))
        .catch(error => console.log(error));
   },
   //删除用户
   delete(){

   }
    },
  computed: {
    //分页数据
    pagedList: function() {
      var start = (this.currentPage - 1) * this.pageSize;
      var end = start + this.pageSize;
      return this.rawList.slice(start, end);
    },
    // 总页数
    totalPage: function() {
      return this.rawList.length / this.pageSize;
    },
    // 总用户
    totalusers: function() {
      return this.rawList.length;
    },
    // 时间列表
  }
};
</script>
<style scoped>
.header {
  font-weight: bolder;
  font-size: x-large;
  background-color: rgb(233, 238,243);
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.flight-detail {
  display: flex;
  justify-content: center;
  align-content: space-around;
  text-align: center;
  color: black;
  padding: 5px;
}
.detail-box {
  margin: 0 5px;
}
.detail-airport {
  font-size: small;
}
.detail-time {
  font-weight: bolder;
  font-size: 30px;
}
.detail-arrow {
  font-size: 20px;
}
</style>
